import React, { useEffect, useState, useRef } from 'react';
import { Outlet, useLocation, useNavigate, renderMatches, matchRoutes, useOutlet } from 'react-router-dom';
import gsap from 'gsap';
import classNames from 'classnames';
import App from './app';
import { Head } from 'components';
import { useEffectSkipFirstRender, useIsXLScreen } from 'components/hooks';
import { useParamAsLanguage } from './i18n';
import { SIDE_MENU_DATA } from './routes';

// Global Elements
export default (props) => {


    const isXLScreen = useIsXLScreen();
    const location = useLocation();
    const [pathname, setPathname] = useState(location.pathname);



    const [bp, setBP] = React.useState(isXLScreen);
    useEffect(() => {
        setBP(isXLScreen);
    }, [isXLScreen]);

    useEffect(() => {
        // console.log('Path changed:', location.pathname);
        setPathname(location.pathname)
        // 在这里执行需要的操作，比如重新获取数据
    }, [location]);



    useParamAsLanguage();


    return (
        <div className='application-layout' style={{ width: '100vw', height: "100vh" }}>
            <Head></Head>
            <Outlet key={pathname} />
        </div>
    );
};
